<template>
    <div class="infoContainer">
        <el-card class="information">
            <div class="infoImg"><img src="../images/01.jpg" style="width: 100%;height:100%;border-radius: 50%;" />
            </div>
            <p class="changeImg">点击更换</p>
            <div class="formItem isNone">
                <el-form :model="form" :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="用户名：">
                                <el-input v-model="form.name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="生日：">
                                <!-- <el-col :span="18"> -->
                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期"
                                    style="width: 100%" />
                                <!-- </el-col> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 男女 -->
                <el-form :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="性别：">
                                <el-button>男</el-button>
                                <el-button>女</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <el-form-item label="城市:">
                                <el-col :span="18">
                                    <!-- <el-select v-model="form.region" placeholder="请选择">
                                        <el-option label="Zone one" value="shanghai" />
                                        <el-option label="Zone two" value="beijing" />
                                    </el-select> -->
                                    <el-cascader v-model="value" :options="options" @change="handleChange" />
                                </el-col>
                            </el-form-item>
                        </el-col>
                    </el-row>



                </el-form>
                <el-form :inline='true' class="infoItem">
                    <el-row justify="space-around" :gutter="20">
                        <el-col :span="12" :offset="0">
                            <el-form-item>
                                <p>成长等级</p>
                                <p>Lv.1</p>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="0">
                            <el-form-item label="技能水平：">
                                <el-select v-model="form.region" placeholder="零基础" >
                                    <el-option label="业余初级" value="shanghai" />
                                    <el-option label="业余中级" value="beijing" />
                                    <el-option label="业余高级" value="beijing" />
                                    <el-option label="专业初级" value="shanghai" />
                                    <el-option label="专业中级" value="beijing" />
                                    <el-option label="专业高级" value="beijing" />
                                </el-select>
                                 
                            </el-form-item>

                        </el-col>
                        <el-col :span="1" :offset="0" >
                          <div style="margin-left:-44px;margin-top:7px" >
                            <svg t="1666329410415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2783" width="18" height="18"><path d="M640.766712 362.494964c0-71.386864-58.078767-129.464607-129.464607-129.464607-71.386864 0-129.464607 58.077743-129.464607 129.464607s58.077743 129.464607 129.464607 129.464607C582.687946 491.959571 640.766712 433.881828 640.766712 362.494964z" p-id="2784"></path><path d="M829.65164 195.676611C744.998635 111.023606 632.445186 64.402799 512.727571 64.402799c-119.718639 0-232.272088 46.62183-316.925093 131.274836C111.148449 280.33064 64.527642 392.884089 64.527642 512.602727c0 119.717615 46.62183 232.272088 131.274836 316.925093 84.654029 84.655052 197.207477 131.275859 316.925093 131.275859 119.717615 0 232.272088-46.620807 316.925093-131.275859 84.655052-84.653005 131.275859-197.207477 131.275859-316.925093C960.927499 392.884089 914.306692 280.33064 829.65164 195.676611zM732.97581 764.003478c-11.04966 0-20.008706-8.959046-20.008706-20.008706 0-111.199615-90.466408-201.666022-201.664999-201.666022S309.637106 632.795157 309.637106 743.994772c0 11.04966-8.958022 20.008706-20.008706 20.008706-11.050684 0-20.008706-8.959046-20.008706-20.008706 0-107.011222 69.916373-197.986213 166.462243-229.684146-55.807027-27.76332-94.262874-85.36932-94.262874-151.816684 0-93.452415 76.029604-169.483042 169.483042-169.483042 93.452415 0 169.483042 76.029604 169.483042 169.483042 0 66.446341-38.455847 124.052341-94.262874 151.816684 96.54587 31.697933 166.462243 122.6719 166.462243 229.684146C752.984516 755.044432 744.025471 764.003478 732.97581 764.003478z" p-id="2785"></path></svg>
                          </div>
                        </el-col>


                    </el-row>
                </el-form>
                <el-form class="infoItem">
                    <el-form-item label="兴趣技能：" >
                        <div style="margin-top:-12px;">
                            <el-badge value="x" class="item" v-for="(item,index) in  addDanceItem" 
                            :key="item.id"  @click="deleteBad(item.id)">
                            <el-button type="" >{{item.name}}</el-button>
                        </el-badge>
                        <el-badge  class="item"  @click="handler" >
                            <el-button text="info" bg>请选择</el-button>
                        </el-badge></div>
                        
                             
                    </el-form-item>
                </el-form>
                <el-form class="infoItem">
                    <el-col :span="12" :offset="6">
                        <el-form-item class="info-save">
                            <el-button type="primary" color="#f93684" style="width:150px;height:50px;margin-top:20px">
                                保存</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
         <!--  -->
            <!-- 兴趣技能弹出框 -->
    <!-- 选着我的兴趣技能 1/7 -->
    <el-dialog
    v-if="isSearch"
    v-model="dialogVisible"
    :title="
      addDanceItem.length > 0
        ? `选着我的兴趣技能 ${addDanceItem.length}/10`
        : '选着我的兴趣技能'
    "
    width="1024px"
    :before-close="handleClose"
  >
    <p style="margin-top: -25px; margin-left: 10px">例如舞蹈就选舞种</p>
    <!-- 搜索 -->
    <div>
      <el-form :inline="true" style="margin: 25px 10px">
        <el-form-item>
          <el-input
            v-model="input1"
            class="w-50 m-2"
            size="large"
            placeholder="搜索兴趣技能"
            :prefix-icon="Search"
          />
        </el-form-item>
        <el-form-item>
          <!--                                                 -->
          <el-button
            size="large"
            @click="toDanceItem"
            :disabled="!input1.length"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!--  -->
    <div>
        <!-- <el-badge value="x" class="item"  @click.self="handler"> -->
                     <!--        <el-button
        value="x"
        size="large"
        @click="deleteId(addDance.id)"
        style="margin: 10px 10px"
        v-for="(addDance, index) in addDanceItem"
        :key="addDance.id"
        >{{ addDance.name }}</el-button
      >      
                      </el-badge> -->
      <el-button
        value="x"
        size="large"
        @click="deleteId(addDance.id)"
        style="margin: 10px 10px"
        v-for="(addDance, index) in addDanceItem"
        :key="addDance.id"
        >{{ addDance.name }}</el-button
      >
    <!-- </el-badge> -->
      <div style="margin: 25px 10px">推荐兴趣技能</div>
      <el-button
        value="x"
        size="large"
        @click="addDance(item.id)"
        v-for="(item, index) in danceList"
        :key="item.id"
        style="margin: 10px 10px"
        >{{ item.name }}</el-button
      >
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" type="large"
          >取消</el-button
        >
        <el-button color="#f93684" type="large" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 搜索内容框 -->
  <el-dialog
    v-else
    v-model="dialogVisible"
    title=""
    width="1024px"
    :before-close="handleClose"
  >
    <!-- isSearch = true -->
    <el-button
      size="large"
      @click="isSearchTrue"
      :icon="ArrowLeftBold"
      style="margin-top: -70px"
      >返回</el-button
    >
    <!-- 搜索 -->
    <div>
      <el-form :inline="true" style="margin-left: 10px">
        <el-form-item style="margin-top: 20px">
          <el-input
            v-model="input1"
            class="w-50 m-2"
            size="large"
            placeholder="搜索兴趣技能"
            :prefix-icon="Search"
          />
        </el-form-item>
        <el-form-item style="margin-top: 20px">
          <el-button
            size="large"
            @click="toDanceItem"
            :disabled="!input1.length"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 点击删除 -->
    <span style="color: #b1b5c1; font-size: 14px; margin: 10px 10px"
      >历史搜索</span
    >
    <el-button type="primary" size="default" @click="" link>
      <svg
        t="1666249083464"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5844"
        width="14"
        height="14"
      >
        <path
          d="M861.184 192.512q30.72 0 50.688 10.24t31.744 25.6 16.384 33.28 4.608 33.28q0 7.168-0.512 11.264t-0.512 7.168l0 6.144-67.584 0 0 537.6q0 20.48-8.192 39.424t-23.552 33.28-37.376 23.04-50.688 8.704l-456.704 0q-26.624 0-50.176-8.192t-40.448-23.04-26.624-35.84-9.728-47.616l0-527.36-63.488 0q-1.024-1.024-1.024-5.12-1.024-5.12-1.024-31.744 0-13.312 6.144-29.696t18.432-30.208 31.744-23.04 46.08-9.216l91.136 0 0-62.464q0-26.624 18.432-45.568t45.056-18.944l320.512 0q35.84 0 49.664 18.944t13.824 45.568l0 63.488q21.504 1.024 46.08 1.024l47.104 0zM384 192.512l320.512 0 0-64.512-320.512 0 0 64.512zM352.256 840.704q32.768 0 32.768-41.984l0-475.136-63.488 0 0 475.136q0 21.504 6.656 31.744t24.064 10.24zM545.792 839.68q17.408 0 23.552-9.728t6.144-31.232l0-475.136-63.488 0 0 475.136q0 40.96 33.792 40.96zM738.304 837.632q18.432 0 24.576-9.728t6.144-31.232l0-473.088-64.512 0 0 473.088q0 40.96 33.792 40.96z"
          p-id="5845"
          fill="#8a8a8a"
        ></path>
      </svg>
    </el-button>

    <div>
      <el-badge value="x" class="item" @click.self="handler">
        <el-button
          size="large"
          @click=""
          style="margin: 10px 10px"
          v-for="(China, index) in history"
          :key="China.id"
          >{{ China.name }}</el-button
        >
      </el-badge>

      <div style="margin: 25px 10px">搜索结果</div>
      <!-- <el-button  size="large" @click="" v-for="(item,index) in danceList" :key="item.id" style="margin:10px 10px">{{item.name}}</el-button> -->
      <div
        class="disSvg"
        v-for="(resultItem, index) in addResult"
        :key="resultItem.id"
        @click="addChina(resultItem.id)"
      >
        <div style="display: flex">
          <div
            style="
              width: 44px;
              height: 44px;
              text-align: center;
              overflow: hidden;
              margin-top: 20px;
              margin-left: 10px;
            "
          >
            <svg
              t="1666231119072"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3683"
              width="30"
              height="30"
            >
              <path
                d="M881.664 132.096c-69.632-69.632-167.936-97.28-263.168-75.776-22.528 5.12-35.84 26.624-30.72 49.152s26.624 35.84 49.152 30.72c67.584-15.36 137.216 4.096 186.368 53.248C926.72 292.864 926.72 460.8 823.296 563.2L512 875.52 199.68 564.224c-102.4-103.424-102.4-271.36 0-373.76 77.824-77.824 204.8-77.824 282.624 0l69.632 69.632c8.192 8.192 77.824 76.8 150.528 76.8h5.12c30.72-1.024 57.344-15.36 77.824-39.936 14.336-17.408 11.264-43.008-6.144-57.344-17.408-14.336-43.008-11.264-57.344 6.144-6.144 8.192-12.288 9.216-17.408 10.24-26.624 2.048-70.656-29.696-93.184-53.248L541.696 133.12c-109.568-109.568-288.768-109.568-399.36 0C7.168 268.288 7.168 487.424 142.336 622.592L483.328 962.56c8.192 8.192 18.432 12.288 28.672 12.288 10.24 0 20.48-4.096 28.672-12.288l340.992-340.992c65.536-65.536 101.376-152.576 101.376-244.736 0-92.16-35.84-179.2-101.376-244.736z"
                fill="#333C4F"
                p-id="3684"
              ></path>
              <path
                d="M240.64 233.472c-33.792 30.72-50.176 76.8-50.176 136.192 0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96c0-34.816 8.192-60.416 23.552-74.752 18.432-17.408 44.032-16.384 46.08-16.384 22.528 2.048 41.984-15.36 44.032-37.888 2.048-22.528-15.36-41.984-37.888-44.032-7.168-1.024-63.488-4.096-107.52 36.864z"
                fill="#333C4F"
                p-id="3685"
              ></path>
            </svg>
          </div>
          <div style="width: 196px">
            <p
              style="
                color: #111;
                font-size: 20px;
                height: 22px;
                line-height: 40px;
                margin-left: 15px;
              "
            >
              {{ resultItem.name }}
            </p>
            <span class="spanAss">{{ resultItem.description }}</span>
          </div>
          <!-- 加号 -->
          <div style="margin-top: 25px; margin-left: 9px">
            <svg
              t="1666232918428"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4823"
              width="20"
              height="20"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="4824"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 专业 -->
  <el-dialog
    v-model="addAdmin"
    title="技术水平"
    width="30%"
    :before-close="handleClose"
  >
    <span>平台将根据你选择的技能水平，优先智能推荐相应内容。</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addAdmin = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,ref } from 'vue'
import {
  getInterest,
  getSearch,
  getHistory,
} from "../../../api/recommend/index";
import { ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { Plus, ArrowLeftBold } from "@element-plus/icons-vue";
import {getFind} from '../../../api/my/index'
// 省
const value = ref([])
// mocak
const options = [
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
  {
    value: 'guide',
    label: '北京',
    children: [
      {
        value: 'disciplines',
        label: '昌平',
        
      },
      {
        value: 'navigation',
        label: '朝阳',
      },
      {
        value: 'navigation',
        label: '海淀',
      },
      {
        value: 'navigation',
        label: '大红门',
      },
      {
        value: 'navigation',
        label: '小红门',
      },
      {
        value: 'navigation',
        label: '石家庄',
      },
    ],
  },
 
]
// 技术水平
const technology =[
 {
  name:'零基础',
  id:'01',
  desc: "零基础小白"
 },
 {
  name:'业余初级',
  id:'02',
  desc: "0-1年"
 },
 {
  name:'业余中级',
  id:'03',
  desc: "1-2年"
 },
 {
  name:'业余高级',
  id:'04',
  desc: "1-3年"
 },
 {
  name:'专业初级',
  id:'05',
  desc: "3-4"
 },
 {
  name:'专业中级',
  id:'06',
  desc: "3-5"
 },
 {
  name:'专业高级',
  id:'07',
  desc: "5-9"
 },
]
// 点击兴趣弹出对话框
const dialogVisible = ref(false);
// 搜索内容框和二级窗口谁存在
const isSearch = ref(true);
// 存储舞蹈品种
const danceList = ref([]);
// 搜集兴趣爱好搜索框输入内容
const input1 = ref("");
// 搜集点击技能时添加到我的
const addDanceItem = ref([]);
// 搜集二级对话框下的搜索结果数据
const addResult = ref([]);
// 点击兴趣技能 弹出对话框
// 历史搜索
const history = ref([]);
// 技术水平的显示隐唱
const addAdmin = ref(false)
const handler = async () => {
  dialogVisible.value = true;
  const result = await getInterest(2,50);
  console.log(result);
  danceList.value = result.data.content;
};

// 点击某个推荐技能添加到我的兴趣技能
const addDance = (id) => {
  const addId = danceList.value.find((item) => item.id === id);
  // console.log(addId);
  // 根据id判断点击的谁 push到addDanceItem
  // 在判断他是否存在如果存在 不让他再次出去
  addDanceItem.value.push(addId);
};
// 点击我选择的技能 删除 /*有瑕疵,是根据下表删除，没有下标*/
const deleteId = (id) => {
  // 点击某个splice indexOf
  const appId = addDanceItem.value.find((item) => item.id === id);
  console.log(appId);
  addDanceItem.value.splice(appId, 1);
};
// 点击搜索 跳到二级页面 请求v-model="input1" 的数据   历史内容的请求
const toDanceItem = async () => {
  // 获取输入的内容
  const sad = input1.value;
  // 判断sad是否为空
  if (!sad) {
    return;
  }
  isSearch.value = false;
  // console.log(sad);
  const result = await getSearch(sad);
  console.log(result);
  addResult.value = result.data;
  // 发送历史内容的请求
  const isSad = await getHistory();
  console.log(isSad);
  history.value = isSad.data;
  // 搜索历史添加
  // history.value.push(sad)
};
// 点击二级对话框下的推荐记录跳转到一级页面 追加到addDanceItem
const addChina = (id) => {
  const ChinaId = addResult.value.find((item) => item.id === id);
  // console.log(addId);
  addDanceItem.value.push(ChinaId);
  isSearch.value = true;
  // 清空输入框
  input1.value = "";
};
// 点击返回一级菜单
const isSearchTrue = () => {
  // 返回
  isSearch.value = true;
  // 清空输入框
  input1.value = "";
};

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

// 删除选中的兴趣技能
 const deleteBad =(id)=>{
  const isDelete = addDanceItem.value.find(item=>item.id == id)
  console.log(isDelete);

  
 }
//  onMounted(()=>{
//   setFind()
//  })
// // 页面刷新 获取技术水平

// const  setFind =async()=>{
//   const skill_level  = 'b384db2d-e652-4fa8-850e-7168bb0e30cb'
//     const result = await getFind(skill_level)
//     console.log(result);
    

// }
// addHandle 点击弹框
 const addHandle =()=>{
    addAdmin.value = true
 }

</script>

<style scoped>
.formItem {
    width: 650px;
    margin: 0 auto;
}

.el-col-12 {
    width: 50%;
}

.information {
    width: 1020px;
    margin: 0 10px;
    /* text-align: center; */
}

.infoImg {
    width: 120px;
    height: 120px;
    margin: 0 auto;

}

.changeImg {
    color: #7d8090;
    font-size: 14px;
    text-align: center;
    padding: 12px;
    margin: 0;
}

.infoItem {
    margin: 20px 0;
}

.item {
    margin-top: 10px;
    margin-right: 40px;
}
</style>